<template>
  <el-form
    ref="form"
    :model="formData"
    :rules="{}"
    :disabled="disabled"
    :validate-on-rule-change="false"
    label-suffix="："
    size="large"
    status-icon
    label-width="0px"
    label-position="right"
  >
    <el-descriptions border :column="3" :class="`common-descriptions-box ${disabled ? 'is-disabled' : ''}`">
      <el-descriptions-item
        v-for="i in [1, 2, 3]"
        :key="i"
        labelClassName="w-[174px] !p-0 !border-0"
        contentClassName="!h-0 !p-0 !border-0"
      ></el-descriptions-item>
      <el-descriptions-item
        v-for="item in initColumns(columns)"
        :key="item.label"
        :span="item.span ? item.span : 1"
        labelClassName="w-[174px] !text-right !leading-none !bg-[#fafbfc] !text-[#515A6E]/70"
        contentClassName="!leading-none"
      >
        <template slot="label">
          <el-tooltip
            class="item"
            effect="dark"
            :content="item.label"
            placement="top-start"
            :disabled="item.label.length <= 7 ? true : false"
          >
            <div :class="`${item.multiple ? '' : 'line-clamp-1'}`">
              <b v-if="item.required" class="isDot"></b>{{ item.label }}
            </div>
          </el-tooltip>
        </template>
        <el-form-item :prop="item.prop" :rules="item.rules" class="!mb-0 !mr-0">
          <slot v-if="item.type === 'slot'" :name="item.slotName"></slot>
          <span v-else-if="!item.label">&nbsp;</span>
          <span v-else-if="disabled && $isEmptyValue(formData[item.prop])" class="pl-[16px]">-</span>
          <el-tooltip
            v-else-if="(disabled || item.disabled) && item.type === 'text'"
            effect="dark"
            :content="formData[item.prop]"
            placement="top"
            :disabled="formData[item.prop].length > 7 ? false : true"
          >
            <span class="line-clamp-1 px-[16px]">{{ formData[item.prop] }}</span>
          </el-tooltip>
          <el-input
            v-else-if="item.type === 'text'"
            v-model="formData[item.prop]"
            :placeholder="item.placeholder"
            :clearable="item.clearable"
            :maxlength="item.maxlength"
            :show-word-limit="item.showWordLimit"
            :readonly="item.readonly"
            :disabled="item.disabled"
          />
          <TDatePicker
            v-else-if="item.type === 'date'"
            v-model="formData[item.prop]"
            :placeholder="item.placeholder"
            :format="item.format"
            :valueFormat="item.valueFormat"
            :clearable="item.clearable"
            :disabled="disabled"
            size="large"
            class="!w-full"
          />
          <TDatePicker
            v-else-if="item.type === 'datetime'"
            v-model="formData[item.prop]"
            type="datetime"
            :placeholder="item.placeholder"
            :format="item.format"
            :valueFormat="item.valueFormat"
            :clearable="item.clearable"
            :disabled="disabled"
            size="large"
            class="!w-full"
          />
          <el-input
            v-else-if="item.type === 'number'"
            v-model="formData[item.prop]"
            type="text"
            :placeholder="item.placeholder"
            :clearable="item.clearable"
            @input="onInputNumber($event, item.prop)"
          />
          <el-input
            v-else-if="item.type === 'textarea'"
            v-model="formData[item.prop]"
            type="textarea"
            :rows="item.rows"
            :placeholder="item.placeholder"
            :clearable="item.clearable"
            :maxlength="item.maxlength"
            :show-word-limit="item.showWordLimit"
            :disabled="item.disabled"
            :autosize="item.autosize"
          />
          <ProjectSelector
            v-else-if="item.type === 'projectSelect'"
            v-model="formData[item.prop]"
            :placeholder="item.placeholder"
            @change="onProChange"
          />
          <LandAcquisitionProjectSelector
            v-else-if="item.type === 'landAcquisitionProjectSelect'"
            v-model="formData[item.prop]"
            :placeholder="item.placeholder"
            @change="onProChange"
          />
          <AssessmentOfAttachmentsSelector
            v-else-if="item.type === 'assessmentOfAttachmentsSelect'"
            v-model="formData[item.prop]"
            :placeholder="item.placeholder"
            @change="onProChange"
          />
          <PersonSelector
            v-else-if="item.type === 'personSelect'"
            v-model="formData[item.prop]"
            :placeholder="item.placeholder"
            :valueProp="item.valueProp"
            @change="onPersonChange"
          />
          <DepartmentTree
            v-else-if="item.type === 'DepartmentTree'"
            v-model="formData[item.prop]"
            :placeholder="item.placeholder"
          />
          <TSelector
            v-else-if="item.type === 'dict'"
            v-model="formData[item.prop]"
            :dictCode="item.dictCode"
            :isAll="false"
            :placeholder="item.placeholder"
            class="w-full"
          />
          <el-radio-group v-else-if="item.type === 'radio'" v-model="formData[item.prop]" class="pl-[16px]">
            <el-radio v-for="radioItem in item.options" :key="radioItem.label" :label="radioItem.value">{{
              radioItem.label
            }}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-descriptions-item>
    </el-descriptions>
  </el-form>
</template>

<script>
import { clone } from "xe-utils";
import ProjectSelector from "@/components/ProjectSelector";
import PersonSelector from "@/components/PersonSelector";
import DepartmentTree from "@/components/DepartmentTree";
import { numberLimit } from "@/util";

export default {
  name: "DescriptionForm",
  components: {
    ProjectSelector,
    PersonSelector,
    DepartmentTree,
  },
  props: {
    columns: {
      type: Array,
      default: () => {
        return [];
      },
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      formData: {},
    };
  },
  created() {
    // this.columns.forEach((v) => {
    //   if (v.label && v.label !== "-") {
    //     this.$set(this.formData, v.prop, "");
    //   }
    // });
  },
  methods: {
    // 初始化数据
    initData(data) {
      if (!data) {
        return;
      }
      this.columns.forEach((v) => {
        if (v.label && v.label !== "-") {
          this.$set(this.formData, v.prop, this.$isEmptyValue(data[v.prop]) ? "" : data[v.prop]);
        }
      });
    },
    // 验证表单
    validForm() {
      let _valid = true;
      let validProp;
      this.$refs.form.validate((valid, object) => {
        _valid = valid;
        validProp = object;
      });
      if (_valid) {
        return true;
      }
      for (const key in validProp) {
        this.$message.error(validProp[key][0].message);
        return false;
      }
    },
    parseForm() {
      const data = clone(this.formData);
      return data;
    },
    onInputNumber(val, prop) {
      this.formData[prop] = numberLimit(val);
    },
    onPersonChange(id, item) {},
    initColumns(data) {
      return clone(data, true).map((v) => {
        if (v.type === "textarea") {
          if (v.autosize) {
            if (v.disabled || this.disabled) {
              v.autosize.minRows = 1;
            }
          } else {
            if (v.disabled || this.disabled) {
              v.autosize = {
                minRows: 1,
                maxRows: 6,
              };
            } else {
              v.autosize = {
                minRows: 2,
                maxRows: 6,
              };
            }
          }
        }
        return v;
      });
    },
  },
};
</script>

<style lang="scss" scoped></style>
